import { useTheme } from '@/contexts/ThemeContext';
import { LogoutOutlined } from '@ant-design/icons';
import { history } from '@umijs/max';
import { Avatar, Dropdown } from 'antd';
import React from 'react';

interface AvatarDropdownProps {
  children?: React.ReactNode;
}

const AvatarDropdown: React.FC<AvatarDropdownProps> = ({ children }) => {
  const themeConfig = useTheme();

  const handleLogout = () => {
    localStorage.removeItem('token');
    history.push('/user/login');
  };

  const menuItems = [
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
      onClick: handleLogout,
    },
  ];

  return (
    <Dropdown menu={{ items: menuItems }} placement="bottomRight">
      {children || <Avatar size="small" src={themeConfig.user?.avatar} />}
    </Dropdown>
  );
};

export default AvatarDropdown;
